<template>
  <div class="examMade">
    <Card style="margin-bottom:20px">
      <Row gutter="50">
        <Form ref="examForm" :model="examForm" :rules="rules">
          <!-- <i-col
            span="3"
            style="height:30px; line-height:30px; color:rgba(80, 80, 80, 1); margin-right:-50px;"
          >
            <FormItem>条件筛选：</FormItem>
          </i-col> -->
          <i-col span="6">
            <FormItem prop="organization">
              <Cascader change-on-select :data="organizationList" v-model="examForm.organization" placeholder="会议管理机构"
                clearable></Cascader>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem prop="theme">
              <Input v-model="examForm.theme" placeholder="会议主题" clearable />
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem prop="index">
              <el-select v-model="examForm.index" @change="val => buttonClick(val)" placeholder="会议状态"
                style="width: 100%;">
                <el-option
                  v-for="item in [{ label: '全部', value: '0' }, { label: '未开始', value: '1' }, { label: '会议中', value: '2' }, { label: '已结束', value: '3' }, { label: '已取消', value: '4' }]"
                  :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem prop="date">
              <DatePicker type="daterange" v-model="examForm.date" placeholder="会议起止期" @on-change="dateOnChange"
                :editable="false" style="width:100%"></DatePicker>
            </FormItem>
          </i-col>
        </Form>
      </Row>
      <Row style="justify-content: end;">
        <div>
          <Button type="primary" @click="query(0)" :loading="queryLoading">查询</Button>
          <Button type="default" @click="resetForm" style="margin-left:10px;margin-right:10px;">重置</Button>
          <!-- <Button type="primary" @click="publishMeeting">会议制定</Button> -->
        </div>
      </Row>
      <!-- <div>
        <span>会议状态：</span>
        <Button :type="btn[0]" @click="buttonClick(0)" class="statusButton">全部</Button>
        <Button :type="btn[1]" @click="buttonClick(1)" class="statusButton statusButton2">未开始</Button>
        <Button :type="btn[2]" @click="buttonClick(2)" class="statusButton">会议中</Button>
        <Button :type="btn[3]" @click="buttonClick(3)" class="statusButton">已结束</Button>
        <Button :type="btn[4]" @click="buttonClick(4)" class="statusButton">已取消</Button>
      </div> -->
    </Card>
    <Row class="listgroup">
      <div>
        <i-col span="6">
          <div class="cardDiv">
            <Card @click="publishMeeting"
              style="position: relative;width:85%;height: 185px;line-height: 145px;text-align: center;" shadow>
              <el-button style="color: #747474;" type="text" icon="el-icon-plus">创建任务</el-button>
            </Card>
          </div>
        </i-col>
      </div>


      <div v-for="(item, index) in examType" :key="index">
        <i-col span="6">
          <div class="cardDiv">
            <div class="mitting-card" @click="mettingMessage(item)">
              <div class="mitting-item-title" :style="{ 'background-color': item.state == '1' ? '#082AFF' : '#EBEBEB', }">
                <span
                  :style="{ 'font-size': '14px', 'font-weight': '600', 'color': item.state == '1' ? '#fff' : '#4A4A4A' }">会议名称</span>
                <span :style="{ 'font-size': '12px', 'color': item.state == '1' ? '#fff' : 'color: #797979' }">{{
                  item.state == '0' ? '未开始' : (item.state == '1' ? '会议中' :
                    (item.state ==
                      '2' ? '已结束' : '已取消'))
                }}</span>
              </div>

              <div style="padding: 20px 15px;">
                <el-descriptions :column="1">
                  <el-descriptions-item label="会议日期">{{ item.meettingDate ? item.meettingDate.substr(0, 10) : ''
                  }}</el-descriptions-item>
                  <el-descriptions-item label="会议地点">{{ item.place }}</el-descriptions-item>
                  <el-descriptions-item label="会议内容">{{ item.fileString }}</el-descriptions-item>
                </el-descriptions>
                <el-button style="float: right;" plain>重新上传</el-button>
              </div>
            </div>
          </div>
        </i-col>
      </div>

      <!-- <div v-for="(item, index) in examType" :key="index">
        <i-col span="6">
          <div class="cardDiv">
            <span>
              <Card style="width:85%; position: relative;" shadow>
                <div slot="extra">
                  <div
                    :class="item.state == '0' ? 'cardExtra cardExtra1' : (item.state == '1' ? 'cardExtra cardExtra2' : 'cardExtra cardExtra3')">
                    {{ item.state == '0' ? '未开始' : (item.state == '1' ? '会议中' : (item.state == '2' ? '已结束' : '已取消')) }}
                  </div>
                  <div
                    :class="item.state == '0' ? 'dropright dropright1' : (item.state == '1' ? 'dropright dropright2' : 'dropright dropright3')">
                    <Icon type="md-arrow-dropright" />
                  </div>
                </div>

                <div class="cardStyle" @click="mettingMessage(item)">
                  <div class="cardTitle">{{ item.theme }}</div>
                  <div class="cardContent">
                    <div>
                      <Icon type="md-calendar" class="cardIcon" />
                      {{ item.meettingDate ? item.meettingDate.substr(0, 10) : '' }}
                    </div>
                    <div class="cardFile">
                      <Icon type="ios-pin" class="cardIcon" />
                      {{ item.place }}
                    </div>
                    <div class="cardFile">
                      <Icon type="ios-document" class="cardIcon" />
                      {{ item.fileString }}
                    </div>
                  </div>
                </div>
              </Card>
            </span>
            <span v-if="item.state == 3">
              <div class="cardFoot">发起人：{{ item.createOperater }}</div>
            </span>
            <span v-else-if="item.state == 0 || item.state == 1">
              <div class="cardFoot2" @click="changeMetting(item)">变更会议</div>
            </span>
            <span v-else>
              <div v-if="item.minutes == null">
                <Uploadv ref="upload1" type="drag" :format="['pdf']" :on-format-error="handleFormatError1"
                  :before-upload="handleUpload1" :show-upload-list="false" :on-success="uploadSuccess1"
                  :on-error="uploadFail1" :headers="{
                    Authorization: tocken,
                  }" name="multipartFile" :data="{
  meetSerialNo: item.meetSerialNo
}" :action="action" class="cardFoot3">上传会议纪要</Uploadv>
              </div>
              <div class="cardFoot3" v-else>
                <Uploadv ref="upload2" type="drag" :format="['pdf']" :on-format-error="handleFormatError2"
                  :before-upload="handleUpload2" :show-upload-list="false" :on-success="uploadSuccess2"
                  :on-error="uploadFail2" :headers="{
                    Authorization: tocken,
                  }" name="multipartFile" :data="{
  meetSerialNo: item.meetSerialNo
}" :action="action" class="cardFoot4">重新上传</Uploadv>
              </div>
            </span>
          </div>
        </i-col>
      </div> -->
    </Row>
    <div style="margin-right:50px;">
      <Page :total="total" show-total style="text-align:right;margin-top:20px;margin-bottom:30px;" @on-change="pageChange"
        :current="pageIndex" :page-size="pageSize" transfer></Page>
    </div>
    <Button @click="info" v-if="false"></Button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      examForm: {
        organization: "",
        theme: "",
        date: ["", ""]
      },
      organizationList: [],
      rules: {},
      queryLoading: false,
      btn: ["primary", "default", "default", "default", "default"],
      statusObj: {},
      // 卡片中数据
      examType: [],
      // 分页数据
      total: 0,
      pageIndex: 1,
      pageSize: 12,
      pageObj: {},
      userCode: null,
      // 会议纪要上传
      tocken: "",
      action: "",
      file1: []
    };
  },
  methods: {
    // 时间改变
    dateOnChange(date) {
      // console.log(date)
      this.examForm.date = date;
    },

    // 提示语
    info(tip) {
      this.$Message.info(tip);
    },

    // 初始化
    initial() {
      // 续期机构下拉框
      // this.api.selectUerList().then(res => {
      //   this.organizaitonList = [];
      //   if (res.code == 200 && res.data != null) {
      //     this.organizationList = res.data[0].listKeyValueVOS;
      //   } else {
      //     this.organizaitonList = [];
      //   }
      // });
      this.api.remanagecomList().then(res => {
        if (res.code == 200 && res.data != null) {
          let arr = []
          arr.push(res.data)
          arr.forEach(one => {
            one.value = one.comcode
            one.label = one.comcode + '-' + one.name
            one.children = one.chilDren || []
            if (one.children) {
              one.chilDren.forEach(two => {
                two.value = two.comcode
                two.label = two.comcode + '-' + two.name
                two.children = two.chilDren || []
                if (two.children) {
                  two.children.forEach(three => {
                    three.value = three.comcode
                    three.label = three.comcode + '-' + three.name
                    three.children = three.chilDren || []
                    if (three.children) {
                      three.children.forEach(four => {
                        four.value = four.comcode
                        four.label = four.comcode + '-' + four.name
                        four.children = four.chilDren || []
                      })
                    }
                  })
                }
              })
            }
          })
          console.log(arr);
          this.organizationList = arr
        } else {
          this.organizationList = [];
        }
      });
    },

    // 重置表单
    resetForm() {
      this.examForm = {
        organization: []
      }
      this.queryLoading = false;
      this.$refs.examForm.resetFields();
    },

    //查询
    query(tmp) {
      if (tmp != 1) {
        this.queryLoading = true;
      }
      this.pageIndex = 1;
      let obj = {
        startDate: this.examForm.date[0], //会议创建时间范围起期
        endDate: this.examForm.date[1], //会议创建时间范围止期
        index: this.pageIndex,
        pageSize: this.pageSize,
        manageCom: this.examForm.organization[this.examForm.organization.length - 1], //管理机构
        theme: this.examForm.theme, //主题
        userCode: this.userCode,
        type: 0,
        canclestate: null,
        nostate: null,
        stateing: null,
        endstate: null
      };
      for (let item in obj) {
        if (obj[item] == null || obj[item].length == 0) {
          delete obj[item];
        }
      }
      this.pageObj = obj;
      this.statusObj = obj;

      this.queryMeet(tmp, obj);
    },

    // 调用查询的接口
    queryMeet(tmp, currentObj) {
      this.examType = [];
      this.total = 0;
      this.api.queryMeetting(currentObj).then(res => {
        this.queryLoading = false;
        if (res.code == 200) {
          if (res.data) {
            if (res.data.length > 0) {
              // 获取文件列表
              res.data.forEach(element => {
                if (element.fileList.length) {
                  if (element.fileList.length > 1) {
                    element["fileString"] = "";
                    for (var i = 0; i < element.fileList.length; i++) {
                      if (i < element.fileList.length - 1) {
                        element["fileString"] += element.fileList[i] + "、";
                      } else {
                        element["fileString"] += element.fileList[i];
                      }
                    }
                  } else {
                    element["fileString"] = element.fileList[0];
                  }
                } else {
                  element["fileString"] = "暂无数据";
                }
                // console.log(element)
                this.examType.push(element);
              });
              this.total = res.data[0].total;
            }
            if (tmp != 1) {
              this.$Message.info(res.msg);
            }
          }
        } else {
          this.total = 0;
          this.examType = [];
          this.$Message.info(res.msg);
        }
      });
    },

    // 按钮点击
    buttonClick(idx) {
      this.examType = [];
      this.statusObj.index = 1;
      if (idx == 0) {
        // 全部
        this.btn = ["primary", "default", "default", "default", "default"];
        this.statusObj["nostate"] = null;
        this.statusObj["stateing"] = null;
        this.statusObj["endstate"] = null;
        this.statusObj["canclestate"] = null;
        this.queryMeet(1, this.statusObj);
      } else if (idx == 1) {
        // 未开始
        this.btn = ["default", "primary", "default", "default", "default"];
        this.statusObj["nostate"] = 1;
        this.statusObj["stateing"] = null;
        this.statusObj["endstate"] = null;
        this.statusObj["canclestate"] = null;
        this.queryMeet(1, this.statusObj);
      } else if (idx == 2) {
        // 会议中
        this.btn = ["default", "default", "primary", "default", "default"];
        this.statusObj["nostate"] = null;
        this.statusObj["stateing"] = 1;
        this.statusObj["endstate"] = null;
        this.statusObj["canclestate"] = null;
        this.queryMeet(1, this.statusObj);
      } else if (idx == 3) {
        // 已结束
        this.btn = ["default", "default", "default", "primary", "default"];
        this.statusObj["nostate"] = null;
        this.statusObj["stateing"] = null;
        this.statusObj["endstate"] = 1;
        this.statusObj["canclestate"] = null;
        this.queryMeet(1, this.statusObj);
      } else {
        // 已取消
        this.btn = ["default", "default", "default", "default", "primary"];
        this.statusObj["nostate"] = null;
        this.statusObj["stateing"] = null;
        this.statusObj["endstate"] = null;
        this.statusObj["canclestate"] = 1;
        this.queryMeet(1, this.statusObj);
      }

      this.pageObj = this.statusObj;
    },

    // 上传会议纪要
    handleFormatError1() {
      this.info("只能上传pdf格式的文件！");
    },
    // 保存需要上传的文件
    handleUpload1(file) {
      let hz = file.name.split(".");
      if (hz[1] == "pdf") {
        let keyID = Math.random()
          .toString()
          .substr(2);
        // 16位前端标志id
        file["keyID"] = keyID;
        this.file1 = file;
        // this.upload1();
        // return false;
      }
    },

    // 文件上传成功
    uploadSuccess1(response, file, fileList) {
      // console.log(response, file, fileList);
      this.$Message.info(file.name + "上传成功");
      this.info("会议纪要上传成功!");
      this.query(1);
      return true;
    },

    // 文件上传失败
    uploadFail1(response, file, fileList) {
      // console.log(response, file, fileList);
      this.info(file.name + "上传失败");
      this.info("会议纪要上传失败！");
      return false;
    },

    // 重新上传会议纪要
    handleFormatError2() {
      this.info("只能上传pdf格式的文件！");
    },
    // 保存需要上传的文件
    handleUpload2(file) {
      let hz = file.name.split(".");
      if (hz[1] == "pdf") {
        let keyID = Math.random()
          .toString()
          .substr(2);
        // 16位前端标志id
        file["keyID"] = keyID;
        this.file2 = file;
        // this.upload2();
        // return false;
      }
    },

    // 文件上传成功
    uploadSuccess2(response, file, fileList) {
      // console.log(response, file, fileList);
      this.$Message.info(file.name + "上传成功");
      this.info("会议纪要上传成功!");
      this.query(1);
      return true;
    },

    // 文件上传失败
    uploadFail2(response, file, fileList) {
      // console.log(response, file, fileList);
      this.info(file.name + "上传失败");
      this.info("会议纪要上传失败！");
      return false;
    },

    // 查看会议纪要
    checkMeetingFile(item) {
      window.open(item.minutesPath + "#toolbar=0");
    },

    // 发布会议
    publishMeeting() {
      this.api.getMeettingId().then(res => {
        if (res.code == 200) {
          this.$router.push({
            // name: "publishMeeting",
            path: "publishMeeting",
            query: {
              meetingId: res.data
            }
          });
        }
      });
    },

    // 会议通知详情
    mettingMessage(item) {
      // console.log(item);
      this.$router.push({
        // name: "mettingInfo",
        path: "mettingInfo",
        query: {
          item: item,
          meetingFlag: 0
        }
      });
    },

    // 页数改变
    pageChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.pageObj.index = pageIndex;
      this.queryMeet(1, this.pageObj);
    },

    // 变更会议q
    changeMetting(row) {
      this.$router.push({
        // name: "changeMeeting",
        path: "changeMeeting",
        query: {
          row: row
        }
      });
    }
  },
  mounted() {
    this.userCode = sessionStorage.getItem("useragentcode");
    this.action =
      // sessionStorage.getItem("userIp") + "api/meetting/minutesFileupload";
      "/scrm-gateway/scrm-uer/api/meetting/minutesFileupload";
    this.tocken = sessionStorage.getItem("credentials");
    this.initial();
    this.query(1);
  },
  beforeDestroy() {
    this.examForm = null;
    this.organizationList = null;
    this.rules = null;
    this.queryLoading = null;
    this.btn = null;
    this.statusObj = null;
    this.examType = null;
    this.total = null;
    this.pageIndex = null;
    this.pageSize = null;
    this.pageObj = null;
    this.userCode = null;
    this.tocken = null;
    this.action = null;
    this.file1 = null;
  }
};
</script>
<style scoped lang="less">
@import "./index";

.mitting-item-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  // background: #EBEBEB;
  padding: 0 15px;
}

.mitting-card {
  position: relative;
  width: 85%;
  height: 185px;
  border-radius: 8px;
  background: #FFF;
  overflow: hidden;
}
</style>

<style>
.ivu-card {
  border-radius: 0px;
}

/* .ivu-card-body:nth-child(2) {
  padding: 16px;
} */

.cardDiv .ivu-card-extra {
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
}

.cardFoot3>.ivu-upload-drag {
  border: 0;
  border-top: 1px solid #ccc;
  border-radius: 0;
  background-color: rgba(247, 249, 250, 1);
}

.cardFoot4>.ivu-upload-drag {
  border: 0;
  border-top: 1px solid #ccc;
  border-radius: 0;
  background-color: rgba(247, 249, 250, 1);
}
</style>